<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Vue组件中的数据</title>
    <!-- 引入vue.js -->
    <script src="vue/vue.js"></script>
</head>

<body>
    <div id="app-7">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter2></button-counter2>
        <button-counter2></button-counter2>
    </div>
    <script>

        Vue.component('button-counter', {

            data: function () {
                return {
                    count: 0
                }
            },
            template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
        })
        Vue.component('button-counter2', {
            data: {
                count: 0
            },
            template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
        })
        // 创建实例，将其挂载到div#app-7元素
        var app7 = new Vue({
            el: '#app-7'
        })
    </script>
</body>

</html>
